<template>
	<view :class="themeName">
		<view style="overflow: scroll; height: 79vh">
			<image style="width: 100%; background-color: #fff" :src="msg.shop.image" mode=""></image>
			<view class="boxes">
				<view class="back bold md">门店：{{ msg.shop.name ? msg.shop.name : '' }}</view>
				<view class="back md m-t-30">地址：{{ msg.shop.address ? msg.shop.address : '' }}</view>
				<view class="flex m-t-30">
					<text class="md">选择：</text>
					<text style="flex: 1" class="md black">
						<text v-if="!timenum">请点击下方选择时间</text>
						<text v-else>{{ timenum }}分钟</text>
					</text>
					<!-- 	<text style="flex: 1" class="md black" @click="showchoose = true">
						<text v-if="!timenum">请点击下方选择时间</text>
						<text v-else>{{ timenum }}分钟</text>
					</text>
					<u-picker v-model="showchoose" :confirm-color="themeColor" cancel-color="#999" mode="selector" :range="chooseList" @confirm="change"></u-picker> -->
				</view>

				<view class="back contbox">
					<view @click="getchange(index)" class="b1 md" v-for="(item, index) in chooseList" :key="index">{{ item }}</view>
				</view>

				<view class="flex m-t-20 row-between">
					<view class="flex">
						<view class="m-r-20">可用积分({{ integral }})</view>
						<view v-if="payintegral">本次抵扣({{ payintegral }})</view>
					</view>
					<view>
						<radio-group>
							<label>
								<radio style="transform: scale(0.7)" @click="radioClick(1)" :checked="checked" />
							</label>
						</radio-group>
					</view>
				</view>
			</view>
		</view>
		<u-picker v-model="show" :confirm-color="themeColor" cancel-color="#999" mode="selector" :range="choosePay" range-key="name" @confirm="chooseChange"></u-picker>
		<view class="base">
			<view @click="submit" style="margin-top: 20rpx" class="other-button" hover-class="other-button-hover">立即支付</view>
			<view class="jiage">
				单价(分钟)：
				<text class="m-r-20">￥{{ price ? price : '' }}</text>
				支付金额：
				<text v-if="timenum" class="m-r-20">￥{{ money }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { strToParams } from '@/utils/tools';
import utils from '@/utils/index.js';
import { jqrInfo, jqrOrder, jqrPay } from '@/api/others.js';
import { nextTick } from 'process';
export default {
	data() {
		return {
			order_id: '',
			loading: true,
			id: '',
			msg: {
				shop: {}
			},
			price: 0, //单价
			showchoose: false,
			chooseList: [],
			timenum: '', //服务时间
			integral: 0, //当前积分
			payintegral: 0, //使用积分
			jfdh: 0, //单积分可兑换
			dhmoney: 0, //可兑换金额
			checked: false,
			money: 0, //支付金额

			show: false,
			choosePay: [
				{ id: '1', name: '拉卡拉支付' },
				{ id: '2', name: '微信支付' }
			]
		};
	},
	onLoad() {
		const options = this.$Route.query;
		console.log(options);
		// #ifndef MP-ALIPAY
		// 扫普通二维码
		if (options.q) {
			let q = decodeURIComponent(options.q);
			let id = this.getquery(q, 'id');
			uni.setStorageSync('jqrid', id);
			console.log(id, '=======>机器人id2');
		}
		if (options.scene && !options.q) {
			// 扫小程序码
			var scene = decodeURIComponent(options.scene);
			let id = this.getUrlParam(scene).id;
			uni.setStorageSync('jqrid', id);
			console.log(id, '=======>机器人id1');
		}
		if (options.id) {
			let id = options.id;
			uni.setStorageSync('jqrid', id);
			console.log(id, '=======>机器人id3');
		}
		// #endif
	},
	onShow() {
		if (this.timenum) {
			console.log(this.timenum, '时间');
		}
		if (this.order_id) {
			console.log(this.order_id, '订单');
			let params = {
				order_id: this.order_id,
				from: 'order2',
				pay_way: 5
			};
			jqrPay(params)
				.then((ret) => {
					if(ret.pay_status==1){
						uni.reLaunch({
							url: '/others/pages/control/control?id=' + this.order_id + '&type=1' + '&time=' + this.timenum
						});
					}else{
						this.order_id = '';
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
						setTimeout(function () {
							uni.reLaunch({
								url: '/others/pages/order_list/order_list?mode=pay'
							});
						}, 1500);
					}
				})
		}
		this.$nextTick(() => {
			if (this.$store.getters.token) {
				this.id = uni.getStorageSync('jqrid');
				this.getinfo();
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		});
	},
	methods: {
		// 获取小程序二维码链接，获取后面的参数
		getUrlParam(scene) {
			var obj = {};
			for (var i = 0; i < scene.split('*').length; i++) {
				var arr = scene.split('*')[i].split('/');
				obj[arr[0]] = arr[1];
			}
			return obj;
		},
		// 扫码普通二维码链接
		getquery(url, name) {
			var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i');
			var r = url.substr(1).match(reg);
			if (r != null) {
				return r[2];
			}
			return null;
		},
		radioClick() {
			this.checked = !this.checked;
			this.getmoney();
		},
		getinfo() {
			this.loading = false;
			jqrInfo({ id: this.id }).then((res) => {
				this.msg = res;
				this.chooseList = res.time;
				this.integral = res.user_integral ? res.user_integral : 0;
				this.jfdh = Number(res.jfdh);
				this.dhmoney = Number(res.user_integral) * Number(res.jfdh);
				this.price = res.shop.price; //单价

				// if(this.msg.is_open==0){
				// 	uni.showModal({
				// 		content: '该设备状态禁止下单，请联系店长！',
				// 		showCancel: false,
				// 		confirmText: '我知道了',
				// 		success: function (res) {
				// 			if (res.confirm) {

				// 			}
				// 		}
				// 	});
				// }
			});
		},
		getchange(index) {
			this.timenum = this.chooseList[index];
			this.getmoney();
		},
		getmoney() {
			if (this.checked) {
				let paynum = Number(this.timenum) * Number(this.price);
				if (this.dhmoney > paynum) {
					this.payintegral = Math.floor(paynum / this.jfdh); //抵扣积分
					this.money = (paynum - this.payintegral * this.jfdh).toFixed(2);
					// console.log(this.payintegral)
					// console.log(this.money)
				} else {
					this.money = (paynum - this.dhmoney).toFixed(2);
					this.payintegral = this.integral;
				}
			} else {
				this.money = (Number(this.timenum) * Number(this.price)).toFixed(2);
				this.payintegral = 0;
			}
		},
		chooseChange(e) {
			// console.log(e[0]);
			let that = this;
			uni.showLoading();
			let index = e[0];
			let pay_way = 5;
			if (index == 1) {
				pay_way = 2;
			}
			this.show = false;
			let is_jifen = 0;
			if (this.checked) {
				is_jifen = 1;
			}
			let params = {
				jqr_id: this.id,
				time: this.timenum,
				is_jifen: is_jifen,
				jifen: this.payintegral,
				price: this.money,
				pay_way: pay_way
			};
			jqrOrder(params).then((ret) => {
				uni.hideLoading();
				if (index == 0) {
					const counterUrl = ret.resp_data.counter_url; // 获取后台返回的counter_url
					let appId = 'wx889424d565967811'; // 默认为：拉卡拉聚合收银台小程序的appId
					// 2、打开收银台半屏小程序示例代码
					uni.openEmbeddedMiniProgram({
						appId,
						path: `payment-cashier/pages/checkout/index?source=WECHATMINI&counterUrl=${encodeURIComponent(counterUrl)}`,
						envVersion: 'release',
						// release: 正式版  trial: 体验版
						success(res) {
							console.log(ret.sn,'机器人名称')
							console.log(ret.order_id,'订单id')
							uni.setStorageSync('jqrdevicename', ret.sn);
							that.order_id = ret.order_id;
							// 打开成功
						},
						fail(err) {
							// 打开失败的回调
							uni.showToast({
								title: '打开支付失败',
								icon: 'none'
							});
							setTimeout(function () {
								uni.reLaunch({
									url: '/others/pages/order_list/order_list?mode=pay'
								});
							}, 1500);
						}
					});
				} else {
					if (ret.config) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: ret.config.timeStamp, // 时间戳（单位：秒）
							nonceStr: ret.config.nonceStr, // 随机字符串
							package: ret.config.package, // 固定值
							signType: ret.config.signType, // 签名算法，这里用的 MD5/RSA 签名
							paySign: ret.config.paySign, //签名
							success(res) {
								uni.showToast({
									title: '支付成功',
									duration: 2000
								});
								setTimeout(function () {
									uni.setStorageSync('jqrdevicename', ret.sn);
									uni.reLaunch({
										url: '/others/pages/control/control?id=' + ret.order_id + '&type=1' + '&time=' + that.timenum
									});
								}, 1500);
							},
							fail(e) {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								});
								setTimeout(function () {
									uni.reLaunch({
										url: '/others/pages/order_list/order_list?mode=pay'
									});
								}, 1500);
							}
						});
					} else {
						uni.showToast({
							title: '支付成功',
							duration: 2000
						});
						setTimeout(function () {
							uni.setStorageSync('jqrdevicename', ret.sn);
							uni.reLaunch({
								url: '/others/pages/control/control?id=' + ret.order_id + '&type=1' + '&time=' + that.timenum
							});
						}, 1500);
					}
				}
			});
		},
		submit() {
			let that = this;
			if (!this.timenum) {
				uni.showToast({
					title: '请选择服务时间',
					icon: 'none'
				});
				return;
			}
			// this.show = true;
			uni.showLoading();
			let pay_way = 5;
			let is_jifen = 0;
			if (this.checked) {
				is_jifen = 1;
			}
			let params = {
				jqr_id: this.id,
				time: this.timenum,
				is_jifen: is_jifen,
				jifen: this.payintegral,
				price: this.money,
				pay_way: 5
			};
			jqrOrder(params).then((ret) => {
				uni.hideLoading();
				const counterUrl = ret.resp_data.counter_url; // 获取后台返回的counter_url
				let appId = 'wx889424d565967811'; // 默认为：拉卡拉聚合收银台小程序的appId
				// 2、打开收银台半屏小程序示例代码
				uni.openEmbeddedMiniProgram({
					appId,
					path: `payment-cashier/pages/checkout/index?source=WECHATMINI&counterUrl=${encodeURIComponent(counterUrl)}`,
					envVersion: 'release',
					// release: 正式版  trial: 体验版
					success(res) {
						console.log(ret.sn,'机器人名称')
						console.log(ret.order_id,'订单id')
						uni.setStorageSync('jqrdevicename', ret.sn);
						that.order_id = ret.order_id;
						// 打开成功
					},
					fail(err) {
						// 打开失败的回调
						uni.showToast({
							title: '打开支付失败',
							icon: 'none'
						});
						setTimeout(function () {
							uni.reLaunch({
								url: '/others/pages/order_list/order_list?mode=pay'
							});
						}, 1500);
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	padding: 0;
}
.boxes {
	background-color: #fff;
	margin: 20rpx;
	padding: 20rpx;
	border-radius: 10rpx;

	.contbox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.b1 {
			width: 31%;
			margin: 20rpx 1%;
			text-align: center;
			background: #4280ed;
			color: #fff;
			padding: 15rpx 0;
			border-radius: 10rpx;

			&:nth-child(1) {
				background: #0190ff;
			}
			&:nth-child(2) {
				background: #10b9c4;
			}
			&:nth-child(3) {
				background: #ff01cc;
			}
			&:nth-child(4) {
				background: #01c6f0;
			}
			&:nth-child(5) {
				background: #01ffe4;
			}
			&:nth-child(6) {
				background: #ffa801;
			}
			&:nth-child(7) {
				background: #01f0ff;
			}
			&:nth-child(8) {
				background: #c001ff;
			}
			&:nth-child(9) {
				background: #01ffa2;
			}
		}
	}
}
.base {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 0;
	box-sizing: border-box;
	height: 20vh;

	.jiage {
		margin: 20rpx 35rpx;
		text {
			color: #4280ed;
		}
	}
}
</style>
